import React, {useState} from 'react';
import { Card, Menu } from 'antd'
import { FormOutlined, FileProtectOutlined } from '@ant-design/icons';

import AccountInfo from "./AccountInfo";
import ModifyPassword from "./ModifyPassword";

const EnumMenuType = {
    modifyPassword: "modifyPassword",
    accountInfo: "accountInfo",
}

const menuItems = [
    // {
    //     key: EnumMenuType.accountInfo,
    //     icon: <FileProtectOutlined />,
    //     label: "账户信息",
    // },
    {
        key: EnumMenuType.modifyPassword,
        icon: <FormOutlined />,
        label: "修改密码",
    },
];

const UserSetting: React.FC = () => {
    const [ selectedKeys, setSelectedKeys ] = useState([menuItems[0].key]);

    return (
        <div className="person-setting">
            <Card>
                <Menu
                    style={{ width: 256, height:"100%" }}
                    selectedKeys={selectedKeys}
                    mode={"inline"}
                    theme={"light"}
                    items={menuItems}
                    onClick={(info) => {
                        setSelectedKeys([info.key]);
                    }}
                />
                <div className="content">
                    {(() => {
                        switch (selectedKeys[0]){
                            case EnumMenuType.modifyPassword:
                                return <ModifyPassword />
                            case EnumMenuType.accountInfo:
                                return <AccountInfo />
                            default:
                                return <span>未找到对应的菜单内容</span>
                        }
                    })()}
                </div>
            </Card>

            {/*language=SCSS*/}
            <style jsx>{`
              .person-setting{
                  height: 100%;
                  :global(.ant-card){
                    height: 100%;
                    :global(.ant-card-body){
                        height: 100%;
                        display: flex;
                        
                        .content{
                            width: 100%;
                            height: 100%;
                            padding: 5px;
                        }
                    }
                  }
              }
            `}</style>
        </div>
    )
}

export default UserSetting